<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chapter5</title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap-3.0.0/dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="lab4.css" rel="stylesheet">

</head>
<body>

<header>
    <div id="topHeaderRow" >
        <nav >
            <ul >
                <li><a href="#"> My Account</a></li>
                <li><a href="#"> Wish List</a></li>
                <li><a href="#"> Shopping Cart</a></li>
                <li><a href="#"> Checkout</a></li>                  
            </ul>
        </nav>
   </div>   <!-- end topHeaderRow -->
   
   <div id="logoRow" >
        <h1>Art Store</h1> 

        <form >
          <label for="search">Search</label>
          <input type="text" placeholder="Search" name="search">

          <button  type="submit"></button>
        </form> 
   </div>  <!-- end logoRow -->
   
   <div id="mainNavigationRow" >
         <nav >
             <ul >
               <li ><a href="#">Home</a></li>
               <li><a href="#">About Us</a></li>
               <li><a href="#">Art Works</a></li>
               <li><a href="#">Artists</a></li>
               <li >
                 <a href="#" >Specials </a>
                 <ul >
                   <li><a href="#">Special 1</a></li>
                   <li><a href="#">Special 2</a></li>                   
                 </ul>
               </li>
             </ul>              

         </nav>
   </div>  <!-- end mainNavigationRow -->
   
</header>


    <h2>Self-portrait in a Straw Hat</h2>
    <p>By <a href="#">Louise Elisabeth Lebrun</a></p>

    <img src="images/art/113010.jpg" class="img-thumbnail img-responsive" alt="Self-portrait in a Straw Hat"/>

    <p>
    The painting appears, after cleaning, to be an autograph replica of a picture, the original of which was painted in Brussels in 1782 in free imitation of Rubens's 'Chapeau de Paille', which LeBrun had seen in Antwerp. It was exhibited in Paris in 1782 at the Salon de la Correspondance. LeBrun's original is recorded in a private collection in France. 
    </p>
    <p class="price">$700</p>
    <div >
        <button type="button" >
        <a href="#"> Add to Wish List</a>  
        </button>
        <button type="button" >
        <a href="#"> Add to Shopping Cart</a>
        </button>
    </div>               
    <p>&nbsp;</p>
    <div >
        Product Details
        <table >
            <tr>
                <th>Date:</th>
                <td>1782</td>
            </tr>
            <tr>
                <th>Medium:</th>
                <td>Oil on canvas</td>
            </tr>  
            <tr>
                <th>Dimensions:</th>
                <td>98cm x 71cm</td>
            </tr> 
            <tr>
                <th>Home:</th>
                <td><a href="#">National Gallery, London</a></td>
            </tr>  
            <tr>
                <th>Genres:</th>
                <td><a href="#">Realism</a>, <a href="#">Rococo</a></td>
            </tr> 
            <tr>
                <th>Subjects:</th>
                <td><a href="#">People</a>, <a href="#">Arts</a></td>
            </tr>     
        </table>
    </div>                              

    <p>&nbsp;</p>

    <h3>Similar Products </h3>  
    <div >
      <img src="images/art/thumbs/116010.jpg" alt="..." >
      <div >
             <p class="similarTitle"><a href="#">Artist Holding a Thistle</a></p>
             <button type="button" > View</button>
             <button type="button" > Wish</button>
             <button type="button" > Cart</button>
      </div>
    </div>                   

    <div >
      <img src="images/art/thumbs/120010.jpg" alt="..." >
      <div >
             <p class="similarTitle"><a href="#">Portrait of Eleanor of Toledo</a></p>
             <button type="button" > View</button>
             <button type="button" > Wish</button>
             <button type="button" > Cart</button>
      </div>
    </div>                   
    <div >
        <img src="images/art/thumbs/107010.jpg" alt="..." >
        <div >
             <p class="similarTitle"><a href="#">Madame de Pompadour</a></p>
             <button type="button" > View</button>
             <button type="button" > Wish</button>
             <button type="button"> Cart</button>
        </div>
    </div>                   
    <div >
        <img src="images/art/thumbs/106020.jpg" alt="..." >
        <div >
             <p class="similarTitle"><a href="#">Girl with a Pearl Earring</a></p>
             <button type="button" > View</button>
             <button type="button" > Wish</button>
             <button type="button" > Cart</button>
        </div>
    </div>                   
  
    <h3 >Cart </h3>
    <div>
        <a  href="#">
        <img  src="images/art/tiny/116010.jpg" alt="..." width="32">
        </a>
        <p ><a href="#">Artist Holding a Thistle</a></p>

        <a  href="#">
        <img src="images/art/tiny/113010.jpg" alt="..." width="32">
        </a>
        <p ><a href="#">Self-portrait in a Straw Hat</a></p>

        <strong class="cartText">Subtotal: <span >$1200</span></strong>
        <div>
        <button type="button" > Edit</button>
        <button type="button" > Checkout</button>    
    
    </div>
      
     <div >
           <h3 >Popular Artists</h3>
           <ul >
              <li><a href="#">Caravaggio</a></li>
              <li><a href="#">Cezanne</a></li>
              <li><a href="#">Matisse</a></li>
              <li><a href="#">Michelangelo</a></li>
              <li><a href="#">Picasso</a></li>
              <li><a href="#">Raphael</a></li>
              <li><a href="#">Van Gogh</a></li>
           </ul>
        </div>
     </div>        
      
     <div >
           <h3 >Popular Genres</h3>
           <ul >
              <li><a href="#">Baroque</a></li>
              <li><a href="#">Cubism</a></li>
              <li><a href="#">Impressionism</a></li>
              <li><a href="#">Renaissance</a></li>
           </ul>
     </div>


<footer>
    <h4> About Us</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>


    <h4> Customer Service</h4>
    <ul >
      <li><a href="#">Delivery Information</a></li>
      <li><a href="#">Privacy Policy</a></li>
      <li><a href="#">Shipping</a></li>
      <li><a href="#">Terms and Conditions</a></li>
    </ul>           

    <h4> Just Ordered</h4>
    <div>
      <a  href="#">
        <img src="images/art/tiny/13030.jpg" alt="...">
      </a>
        <p> <a href="#">Arrangement in Grey and Black</a></p>
        <em>5 minutes ago</em>
    </div>
    <div >
      <a  href="#">
        <img  src="images/art/tiny/116010.jpg" alt="...">
      </a>
        <p ><a href="#">Artist Holding a Thistle</a></p>
        <em>11 minutes ago</em>
    </div>   
    <div >
      <a class="pull-left" href="#">
        <img src="images/art/tiny/113010.jpg" alt="...">
      </a>

        <p class="similarTitle"><a href="#">Self-portrait in a Straw Hat</a></p>
        <em>23 minutes ago</em>
      </div>
    </div>  
    

    <h4> Contact us</h4>
    <form >
        <label  for="name">Name</label>
        <input type="text" name="email" placeholder="Enter name ...">


        <label for="email">Email</label>
        <input type="email"  name="email" placeholder="Enter email ...">

        <label for="email">Email</label>
        <textarea  rows="3" placeholder="Enter message ..."></textarea>

      <button type="submit">Submit</button>
    </form>  

   
   <div id="copyrightRow">
       <p>All images are copyright to their owners. This is just a hypothetical site
       <span >&copy; 2014 Copyright Art Store</span></p>
   </div>
</footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="bootstrap-3.0.0/assets/js/jquery.js"></script>
    <script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>    
  </body>
</html>
